<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<!-- layUI的核心CSS文件 -->
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui-v2.5.7/layui/css/layui.css" />
		<!-- layUI的核心JS文件 -->
		<script src="${pageContext.request.contextPath}/static/layui-v2.5.7/layui/layui.js" type="text/javascript" charset="UTF-8"></script>
<%--		引用jq--%>
		<script src="${pageContext.request.contextPath}/static/script/jquery-1.7.2.js"></script>
		<script>
			layui.use('form', function(){
		  var form = layui.form;
		});
		</script>

	</head>
	<body>
	<script>
		//JavaScript代码区域
		layui.use('element', function () {
			var element = layui.element;
		});
		layui.use('form', function () {
			var form = layui.form;
		});
	</script>


	<!-- 头部导航栏 -->
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo"><a style="color: #009688;">龙洞闲置购物系统</a></div>

			<!-- 头部区域（可配合layui已有的水平导航） -->

			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item">
					<a href="ShowALLGoods">首页</a>
				</li>
				<li class="layui-nav-item">
					注册
				</li>
			</ul>

		</div>
	</div>
	<div class="layui-row">
		<div class="layui-col-md6 layui-col-lg-offset3"
			 style="margin-top: 80px;border: 1px solid gray; padding: 20px;margin-bottom: 20px;">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>用户注册</legend>
			</fieldset>
			<form class="layui-form layui-form-pane" action="regist" method="post">

				<input type="hidden" name="ubalance" value="0">

				<input type="hidden" name="action" value="regist">




				<div class="layui-col-lg-offset1 layui-col-md10 " style="margin-top:10px;">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text" id="uname" name="uname" value="${requestScope.uname}"required
							   lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" maxlength="20">
					</div>
					<span class="accountMsg">${requestScope.msg}</span>

				</div>
				<%--					处理验证用户名是否存在--%>
				<script type="text/javascript">
					$(function (){
						$("#uname").blur(function (){
							//	获取到前端用户名
							var uname = this.value;

							$.getJSON("${pageContext.request.contextPath}/ajaxIsExistuname?uname="+uname,function (data){
								if(data.existsUname){
									$("span.accountMsg").text("该用户名已存在");
									$("span.accountMsg").css("color","red");
									unameExist = false;
									verifyNameNumberAndPhone(unameExist,unumberExist,judge);
								}else {
									$("span.accountMsg").text("用户名可用");
									$("span.accountMsg").css("color","green");
									unameExist = true;
									verifyNameNumberAndPhone(unameExist,unumberExist,judge);
								}
							});
						});
					});
				</script>
				<div class="layui-col-lg-offset1 layui-col-md10 " style="margin-top:10px;">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="password" name="upassword" id="upassword" required lay-verify="required"
							   placeholder="请输入密码" autocomplete="off" class="layui-input" maxlength="30">
					</div>
				</div>

				<div class="layui-col-lg-offset1 layui-col-md10 " style="margin-top:10px;">
					<label class="layui-form-label">确认密码</label>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="password" name="repwd" id="repwd" required lay-verify="required"
							   placeholder="请确认密码" autocomplete="off" class="layui-input" maxlength="30">
					</div>
					<span class="passwordMsg">${requestScope.msg}</span>
				</div>
<%--				确认密码是否相同--%>
		<script type="text/javascript">
			$(function (){
				$("#submit").click(function (){
					var passwordText = $("#upassword").val();
					var repwdText = $("#repwd").val();
					if(passwordText!=repwdText){
						$("span.passwordMsg").text("密码与确认密码不一致~");
						$("span.passwordMsg").css("color","red");
						return false;
					}
					$("span.passwordMsg").text("");
				})
			})
		</script>
				<%--					处理验证学号是否存在--%>
				<script type="text/javascript">
					let unumberExist = true;
					$(function (){
						$("#unumber").blur(function (){
							//	获取到前端学号
							var unumber = this.value;
							$.getJSON("${pageContext.request.contextPath}/ajaxIsExistUnumber?unumber="+unumber,function (data){
								if(data.existsUnumber){
									$("span.errorMsg").text("该学号已存在");
									$("span.errorMsg").css("color","red");
									unumberExist = false;
									verifyNameNumberAndPhone(unameExist,unumberExist,judge);
								}else {
									$("span.errorMsg").text("学号可用");
									$("span.errorMsg").css("color","green");
									unumberExist = true;
									verifyNameNumberAndPhone(unameExist,unumberExist,judge);
								}
							});
						});
					});
				</script>
				<div class="layui-col-lg-offset1 layui-col-md10 " style="margin-top:10px;">
					<label class="layui-form-label">学号</label>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text" name="unumber" id="unumber" required lay-verify="required"
							   placeholder="请输入学号" autocomplete="off" class="layui-input">
					</div>
					<span class="errorMsg">${requestScope.msg}</span>
				</div>


				<div class="layui-col-lg-offset1 layui-col-md10 " style="margin-top:10px;">

					<label class="layui-form-label">院系</label>
					<div class="layui-input-inline">
						<select name="ufaculty" lay-verify="required">
							<option value="">请选择院系</option>
							<option value="管理学院">管理学院</option>
							<option value="应用数学学院">应用数学学院</option>
							<option value="国际贸易学院">国际贸易学院</option>
							<option value="马克思学院">马克思学院</option>
						</select>
					</div>
				</div>

				<div class="layui-col-lg-offset1 layui-col-md10 " style="margin-top:10px;">
					<label class="layui-form-label">联系电话</label>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text" name="uphone" id="uphone" required lay-verify="required"
							   placeholder="请输入联系电话" autocomplete="off" class="layui-input">
					</div>
					<label id="phoneTips" hidden style="color: red">电话号码格式错误</label>
				</div>

				<div class="layui-col-lg-offset1 layui-col-md10 layui-form-item layui-form-text"
					 style="margin-top: 10px;">
					<label class="layui-form-label" >个性签名</label>
					<div class="layui-input-block">
						<textarea name="usign" placeholder="请输入个性签名,限80字符" class="layui-textarea" id="usign" maxlength="80" style="resize: none;"></textarea>
					</div>
				</div>

				<div class="layui-col-lg-offset3 layui-col-md10" style="margin-top:30px;">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="register" id="submit">注册</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
				<script>
<%--					电话号码正则验证--%>
					let unameExist = true; //用户名是否存在
					let judge=true;
					var phoneNumber = document.getElementById("uphone");
					var phoneTips = document.getElementById("phoneTips");
					let submit = document.getElementById("submit");
					var uname = document.getElementById("uname");
					phoneNumber.onblur = function() {
						var phone = document.getElementById('uphone').value;
						if(!(/^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(phone))){
							phoneTips.hidden = false;
							judge=false;
						}
						else{
							phoneTips.hidden = true;
							judge=true;
						}

						verifyNameNumberAndPhone(unameExist,unumberExist,judge);
					}
					
					function verifyNameNumberAndPhone(unameExist,unumberExist,judge) {
						if (!judge||!unameExist||!unumberExist) {
							submit.disabled = true;
							submit.classList.add("layui-btn-disabled");
						} else if (judge&&unameExist&&unumberExist) {
							submit.disabled = false;
							submit.classList.remove("layui-btn-disabled");
						}
					}

				</script>

			</form>
		</div>
	</div>




	</body>
</html>
